<template>
  <div class="comesoon_body">
    <Loading :is-data="isData" :is-erro="isErro" @get-data="getData" :pull-down-msg="pullDownMsg"></Loading>
      <Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd" ref="scroller" :refresh="refresh">
        <div>
            <div class="exxpeted-title">近期最受期待</div>
                <ScrollerX>
                  <div class="expectedlist_wrapper" :style="{width:listWidth+'px'}">
                      <div class="expected_info" v-for="item in expectedList" :key="item.id" >
                          <img :src="item.img|filterImg" alt />
                          <div class="expected_mark">
                            <span></span>
                          </div>
                          <div class="expected_wish">{{item.wish}}人想看</div>
                          <div class="expected_name">{{item.nm}}</div>
                          <div class="expected_timer">{{item.comingTitle|timer}}</div>
                      </div>
                  </div>
                </ScrollerX>

            <div style="width:100%;height:8px;background-color:#f2f2f2"></div>
            <template v-if="comingList.length > 0">
                <comingList ref="comingList" :coming-list="comingList"></comingList>
            </template>
            <div style="text-align:center;padding:10px 0;">{{pullUpMsg}}</div>
        </div>
      </Scroller>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import Loading from '@/components/loading/loading'
import comingList from './comingList'
import locationCity from '../gerLocaltion.js'

export default {
  data () {
    return {
      isData: false,
      isErro: false,
      pullDownMsg: '',
      expectedList: [],
      comingList: [],
      tmpCity: '',
      listWidth: 0,
      // 下拉加载
      pullUpMsg: '',
      movieids: [],
      refresh: false
    }
  },
  computed: {
    ...mapState(['currentCity'])
  },
  components: {
    comingList,
    Loading
  },
  filters: {
    filterImg (value) {
      return value.replace('w.h', '170.230')
    },
    timer (value) {
      return value.split(' ')[0]
    }
  },
  mounted () {
    // 当前城市
    this.tmpCity = this.currentCity
    // 近期最受期待
    this.getMxpectedList(this.currentCity.id)
    // 即将上映
    this.comeingList()
  },
  activated () {
    for (let prop in this.tmpCity) {
      if (this.tmpCity[prop] != this.currentCity[prop]) {
        console.log('comesonn动态切换')
        this.getMxpectedList()
      }
    }
  },
  methods: {
    getMxpectedList (id) {
      this.isData = true // 加载中
      this.axios(`/ajax/mostExpected?ci=${id}&limit=10&offset=0&token=`)
        .then(res => {
          if (res.data.coming.length > 0) { // 有数据
            this.expectedList = res.data.coming
            this.listWidth = 100 * res.data.coming.length
            this.isData = false
          }
        }).catch(err => {
          if (err) {
            setTimeout(() => {
              this.isData = false
              this.isErro = true
            }, 3000)
          }
        })
    },
    // 下拉刷新
    pullDownMostAxios (id) {
      this.axios(`/ajax/mostExpected?ci=${id}&limit=10&offset=0&token=`)
        .then(res => {
          if (res.data.coming.length > 0) { // 有数据
            this.pullDownMsg = '已显示最新内容'
            this.expectedList = res.data.coming
            this.listWidth = 100 * res.data.coming.length
            setTimeout(() => {
              this.pullDownMsg = ''
            }, 1000)
          }
        }).catch(err => {
          if (err) {
            setTimeout(() => {
              this.isErro = true
            }, 3000)
          }
        })
    },
    getData () {
      this.isErro = false
      this.getMxpectedList(this.currentCity.id)
    },

    // -------------即将上映电影----------
    //
    comeingList () {
      this.axios(`/ajax/comingList?ci=${this.currentCity.id}&token=&limit=10`).then(res => {
        console.log(res.data.coming.length)
        if (res.data.coming.length > 0) { // 有数据
          this.comingList = res.data.coming // 显示列表
          this.movieids = res.data.movieIds.slice(res.data.coming.length) // id总计录
        }
      }).catch(err => {
        // 断网
        console.log(err)
      })
    },
    // 下拉加载
    upGetComeAxios (id) {
      let movieids = this.movieids.splice(0, 10).join(',')
      return this.axios({
        method: 'get',
        url: `/ajax/moreComingList?ci=${this.currentCity.id}&token=&limit=10&movieIds=` + movieids
      })
    },
    pullUpAxios () {
      this.upGetComeAxios().then(res => {
        if (res.data.coming.length > 0) {
          this.pullUpMsg = ''
          this.comingList = this.comingList.concat(res.data.coming)
          // 加载新数据后，在Dom节点挂载完成后，重新计算高度
          this.$nextTick(() => {
            this.refresh = true
            console.log('ref更新了')
          })
        }
      }).catch(err => {
        if (err) {
          setTimeout(() => {
            this.isErro = true
          }, 3000)
        }
      })
    },
    // -------------------上拉加载 下拉刷新---------------------

    handleToScroll (pos) {
      this.refresh = false
      if (pos.y > 0) {
        this.pullDownMsg = '正在更新中'
      }
      // 上拉加载
      let mh = this.$refs.comingList.$el.offsetHeight
      let sh = this.$refs.scroller.$el.offsetHeight
      if (-pos.y > (mh - sh)) {
        if (this.movieids.length > 0) {
          this.pullUpMsg = '数组正在加载中'
        } else {
          this.pullUpMsg = '数据到底了'
        }
      }
    },
    handleToTouchEnd (pos) {
      if (pos.y > 20) {
        this.pullDownMostAxios(this.currentCity.id)
      }
      // 上拉加载
      let mh = this.$refs.comingList.$el.offsetHeight
      let sh = this.$refs.scroller.$el.offsetHeight
      if (-pos.y > (mh - sh) && this.movieids.length > 0) {
        this.pullUpAxios()
      } else {
        setTimeout(() => { this.pullUpMsg = '' }, 500)
      }
    }
  }
}
</script>
<style>
.comesoon_body{
  height: 100%;
  overflow: hidden;
}
.exxpeted-title {
  width: 100%;
  padding:10px 0 0 15px;
  font-size: 14px;
  color: #333;
  background: #fff;
}
.expectedlist_wrapper{
  background: #fff;
  padding: 10px 15px;
  display: flex;
  flex-direction: row;

}
.expected_info {
  width: 85px;
  margin-right: 15px;
  position: relative;
  flex-shrink: 0;
}
.expected_info img{
  display: block;
  width: 85px;
  height: 115px;
}
.expected_mark{
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  line-height: 28px;
  text-align: center;
  background: rgba(61,63,71,.6);
  border-bottom-right-radius: 10px;
}
.expected_mark span{
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url('../../../assets/images/love.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.expected_wish{
  position: absolute;
  top: 100px;
  right:0;
  color: #faaf00;
  font-size: 12px;
  font-weight: bold;
  line-height: 12px;
}
.expected_name{
  white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
  margin-top: 5px;
  font-size: 13px;
  font-weight: bold;
}
.expected_timer{
  margin-top: 5px;
  font-size: 12px;
  font-weight: 100;
  color: #999;
}
</style>
